<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { createMap, getSelectItem, PointType } from "../methods/index";
import Feature, { FeatureLike } from "ol/Feature";
import { Style } from "ol/style";
import { MapBrowserEvent } from "ol";
import markBlue from "../methods/assets/images/mark_blue.png";
const mapBox = ref();

onMounted(() => {
  const map = (window.map = createMap({
    target: mapBox.value,
  }));
  map.on("singleclick", function (e: MapBrowserEvent<MouseEvent>) {
    const item = getSelectItem(e);
    if (item) {
      console.log("点击到", item);
    } else {
      console.log("点击到空白区域");
    }
  });

  map.drawPoints(
    [
      {
        lng: 117.123962,
        lat: 40.130056,
      },
    ],
    {
      style: {
        type: PointType.Circle,
        radius: 10,
        color: "rgba(0,0,0,0.5)",
        sizeFit: true,
      },
    }
  );

  map.drawOverlay(
    [
      {
        lng: 117.123962,
        lat: 40.130056,
      },
      {
        lng: 116.123962,
        lat: 43.130056,
      },
    ],
    {
      html: (data)=>{
        console.log(data)
        return `<img src="${markBlue}">`
      },
      overlayOptions: {
        className: "my-overlay",
        positioning: "bottom-center",
      },
    }
  );
});
</script>

<template>
  <div ref="mapBox" style="width: 100%; height: 100%"></div>
</template>

<style scoped></style>
